<template>
    <view class="city">
        <Navigation title="城市" background="#fff" />

        <view class="ph-40 pv-16 search">
            <u-search
                placeholder="请输入搜索内容"
                v-model="keyword"
                bgColor="#fff"
                borderColor="#CDCDCD"
                searchIconSize="29"
                searchIconColor="#999999"
                placeholderColor="#999999"
                @custom="searchTap"
                @clear="searchTap"
            >
            </u-search>
            <view class="w-f h-120 f ai-c">
                <view class="fs-32 fw-500 text-color4 mr-16">{{ cityName }} </view>
                <view class="fs-24 text-color3">当前选择</view>
            </view>
        </view>

        <scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
            <view class="mt-20 hot-city ph-40 pt-25 pb-16" id="ScrollTop">
                <view class="fs-28 text-color3">热门城市</view>
                <view class="mt-27 f fc-w">
                    <view
                        v-for="(item, index) in HotCity"
                        :key="index"
                        class="mb-16 w-212 h-64 b-64 hot-box f ai-c jc-c mr-16 fs-28 text-color2"
                        @click="getStorage(item)"
                    >
                        {{ item }}
                    </view>
                </view>
            </view>
            <view v-for="(item, index) in CityList" :key="index">
                <view class="h-68 w-f pl-40 f ai-c fs-26 text-color3" :id="item.initial">{{ item.initial }}</view>
                <view
                    class="w-f ph-40 fs-32 text-color4 city-name"
                    v-for="(item_city, name_index) in item.list"
                    :key="name_index"
                    @click="getStorage(item_city.name)"
                >
                    <view class="name-box f-w h-96 f ai-c">{{ item_city.name }}</view>
                </view>
            </view>
        </scroll-view>
        <view class="latter">
            <view class="fs-20 text-color4 mb-24 w-28 h-28 f ai-c jc-c" @tap="getLetter('ScrollTop')" :class="LetterId == 'ScrollTop' ? 'active' : ''">热</view>
            <view
                v-for="(l, i) in LatterName"
                :key="i"
                class="fs-20 text-color4 mb-24 w-28 h-28 f ai-c jc-c"
                @tap="getLetter(l)"
                :class="LetterId == l ? 'active' : ''"
                >{{ l }}</view
            >
        </view>
    </view>
</template>
<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import cityData from './json/city.json';
import { useAuthStore } from '@/store/modules/auth';

const cityName = ref<string | undefined>('');
const HotCity = ['北京', '深圳', '上海', '成都', '广州', '金华'];
const LatterName = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
const authStore = useAuthStore();
const CityList = ref(cityData.city);
const keyword = ref<string>('');
const LetterId = ref('');
let height = 0;
onShow(() => {
    cityName.value = authStore.getCity;
    height = authStore.getHeight;
});
const searchTap = () => {
    if (!keyword.value) {
        CityList.value = cityData.city;
        return;
    }
    let list: any[] = [];
    cityData.city.forEach((item) => {
        item.list.forEach((iten) => {
            if (iten.name === keyword.value) {
                list = [
                    {
                        initial: item.initial,
                        list: [
                            {
                                ...iten,
                            },
                        ],
                    },
                ];
            }
        });
    });
    CityList.value = list;
};
const getLetter = (name: string) => {
    LetterId.value = name;
    uni.pageScrollTo({
        selector: '#' + name,
        duration: 300,
    });
};
const getStorage = (name: string) => {
    cityName.value = name;
    authStore.setCity(name);
    console.log(authStore);
    uni.switchTab({ url: '/pages/index/index' });
};
</script>

<style lang="scss" scoped>
.city {
    background: #f5f5f5;
    min-height: 100vh;
    .ynq-ScrollView {
        height: calc(100vh - 160rpx);
    }
    .latter {
        position: fixed;
        right: 8rpx;
        top: 240rpx;
    }
    .active {
        border-radius: 50%;
        color: #fff;
        background: #fabb3c;
    }
    .city-name {
        background: #fff;
        .name-box {
            border-bottom: 1px solid #f0f0f0;
        }
    }
    .hot-city {
        background: #ffffff;
        .hot-box {
            background: #f8f8f8;
        }
        .hot-box:nth-child(3n) {
            margin-right: 0;
        }
    }
    .search {
        background: #ffffff;
        ::v-deep .u-search__content {
            box-shadow: 0 2rpx 12rpx 0 #f5f5f5 !important;
            border-radius: 8rpx !important;
            height: 96rpx !important;
            width: 548rpx !important;
        }
        ::v-deep .u-search__action--active {
            font-weight: 500 !important;
            font-size: 32rpx !important;
            color: #222222 !important;
        }
    }
}
</style>
